<template>
  <div class="w-full" v-loading="loading">
    <!-- <el-button class="mb-16px" type="primary" @click="goCreate"
      >新增供给</el-button
    > -->
    <div class="mb-16px">
      <el-input
        v-model="keyword"
        placeholder="请输入关键字"
        class="w-300px mr-10px"
      ></el-input>
      <el-button type="primary" @click="resetPage">查询</el-button>
    </div>
    <div class="flex flex-wrap">
      <Card
        v-for="item in list"
        :key="item.id"
        :data="item"
        @toggle="toggleStatus(item)"
      />
      <el-pagination
        v-show="list.length"
        class="w-full justify-center"
        :total="total"
        layout="total, sizes, prev, pager, next"
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :page-sizes="[15, 30, 60, 120]"
      ></el-pagination>
      <Empty v-if="!list.length" />
    </div>
  </div>
</template>

<script setup>
import Card from "@/views/supply/components/supplyCard.vue";
import { usePage, useLoading } from "@/hooks";

const $api = inject("$api");
const { loading, setLoading } = useLoading();
const { page, total, resetPage } = usePage(15);

const keyword = ref("");
const list = ref([]);
const getMySupply = async () => {
  setLoading(true);
  try {
    const { data: rows, total: resTotal } =
      await $api.supply.getSupplyNormalList({
        ...page.value,
        keyword: keyword.value,
      });
    list.value = rows;

    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

const toggleStatus = (item) => {
  item.status = Number(!item.status);
};

watch(
  () => page.value,
  (val) => {
    getMySupply();
  },
  {
    deep: true,
  }
);

onMounted(() => {
  getMySupply();
});
</script>
